<!-- 功能：防止用户快速重复点击按钮，避免重复提交或操作 -->
<template>
  <el-button v-bind="$attrs" @click="throttledClick">
    <slot></slot>
  </el-button>
</template>

<script setup lang="ts">
import { throttle } from 'lodash-es'
import { computed } from 'vue'

interface Props {
  /** 节流时间间隔，单位毫秒，默认 1000ms */
  throttleDelay?: number
  /** 是否在节流期间的开始时立即执行，默认 true */
  leading?: boolean
  /** 是否在节流期间的结束时执行，默认 false */
  trailing?: boolean
}

// BaseButton 组件的事件定义
interface Emits {
  /** 点击事件，经过节流处理 */
  (e: 'click', event: MouseEvent): void
}

// 定义组件属性
const props = withDefaults(defineProps<Props>(), {
  throttleDelay: 1000,
  leading: true,
  trailing: false
})

// 定义组件事件
const emit = defineEmits<Emits>()

const handleClick = (event: MouseEvent): void => {
  emit('click', event)
}

// 使用 lodash throttle 创建节流后的点击处理函数

const throttledClick = computed(() => {
  return throttle(handleClick, props.throttleDelay, {
    leading: props.leading,
    trailing: props.trailing
  })
})
</script>

<style lang="scss" scoped>
// 适配暗色：依赖 Element Plus 按钮自身主题，额外处理文字颜色覆盖场景
@media (prefers-color-scheme: dark) {
  :deep(.el-button) {
    // 使用暗色文本变量，尽量不破坏 Element Plus 主题色
    color: $text-color-primary-dark;
  }
}
</style>
